<script setup>
 
</script>



<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="(order , orderIndex) in ordersList" :key="order.orderId">
                <div class="left" >
                    <p>{{order.orderDate}}</p>
                    <p>{{order.setmealName}}</p>
                </div>
                <div class="right" v-if="order.state == 3 && isShowButton(order.orderDate)" @click="cancelAppointment(order.orderId)">
                    取消预约
                </div>
                <div class="right" v-if="order.state == 3 && !isShowButton(order.orderDate)" @click="cancelAppointment(order.orderId)">
                    待体检
                </div>
                <div  class="cancel" v-if="order.state == 1">
                    未付款
                </div>
                <div class="over" v-if="order.state == 2" onclick="location.href='appointmentcancel.html'">
                    查看体检报告
                </div>
                <div class="cancel" v-if="order.state == 0">
                    预约已取消
                </div>
            </li>
        </ul>
        
        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>

</template>
<script>
import { reactive, toRefs, ref } from "vue";
import axios from "axios";
import { useRouter,useRoute } from "vue-router";
import { getSessionStorage } from "@/common";
import Footer from "@/components/Footer.vue";
export default {
    setup(){
        const router = useRouter();
        const route = useRoute();
        //const alipayForm = ref();
        const state=reactive({
            userId:getSessionStorage('user').userId,
            ordersList:[]
        });
        const isShowButton = (givenTime) => {
                    // 获取当前时间
                    const currentTime = new Date();
                    // 计算时间差（毫秒）
                    const timeDifference = new Date(givenTime) - currentTime;
                    // 将毫秒转换为天数
                    const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
                    // 返回是否显示按钮
                    return daysDifference >= 2;
                };

        listByUserId();

        function listByUserId(){
            axios.post("/api/orders/listOrderByUserId",{userId:state.userId}).then((response)=>{
                // state.ordersList = response.data.data;
                console.log(response.data)
                state.ordersList = response.data.data
            }).catch((error)=>{
                alert("查询订单失败!请与系统管理员联系!")
            })
        }

        function cancelAppointment(orderId){
            console.log("取消订单");
            axios.post("/api/orders/cancelAppointment",{orderId:orderId}).then((response)=>{
                if(response.status == 200){
                    console.log("取消预约成功!");
                    router.push({path:'/cancel'});
                }
            }).catch((error)=>{
                alert("取消预约失败!请与医院工作人员联系!")
            })
        }

        
        // function toPay(orderId ,price){
        //     axios.post("/api/pay/alipay",{
        //         orderId:orderId,
        //         price:price})
        //             .then(res => {
        //             console.log(res);
        //             // 获取后端返回的表单
        //             alipayForm.value.innerHTML = res.data
        //             console.log(alipayForm.value);
        //             window.document.forms[0].submit()
        //             })
        //             .catch(err => {
        //             console.log(err);
        //             })
        //     console.log("去付款"+orderId+","+price)
        // }
        return{
            ...toRefs(state),
            listByUserId,
            isShowButton,
            cancelAppointment
        }
    },
    components:{
    Footer
}

}

</script>



<style scoped>
    /*********************** 总容器 ***********************/
.wrapper{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header{
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa{
    font-size: 8vw;
}

/*********************** footer ***********************/
footer{
    width: 100%;
    height: 14.2vw;
    box-sizing: border-box;
    border-top: solid 1px #E9E9E9;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 0;
}
footer ul{
    width: 100%;
    height: 14.2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 3vw;
    color: #999;

    user-select: none;
    cursor: pointer;
}
footer ul li .fa{
    font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban{
    width: 100%;
    height: 15.7vw;
}
.bottom-ban{
    width: 100%;
    height: 14.2vw;
}

/*********************** ul ***********************/
ul{
    width: 86vw;
    margin: 0 auto;
}
ul li{
    width: 100%;
    height: 14vw;
    border-bottom: solid 1px #EEE;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul li .left{
    user-select: none;
    cursor: pointer;
}
ul li .left p:first-child{
    color: #555;
    font-size: 3.3vw;
}
ul li .left p:last-child{
    color: #333;
    font-size: 4.2vw;
    font-weight: 600;
}
ul li .right{
    font-size: 4vw;
    color: #E6A23C;
}

ul li .cancel{
    font-size: 4vw;
    color: #FF0000;
}
ul li .over{
    font-size: 4vw;
    color: #00DD00;
}
</style>